<script setup lang="ts">
import * as echarts from 'echarts';

//页面加载完成后加载我们的图标
import { onMounted } from 'vue'

onMounted(async () => {

    var chartDom = document.getElementById('echartsMain-Bar');
    var myChart = echarts.init(chartDom);
    myChart.resize({
        width: 500,
        height: 200
    })

    var option = {
        title: {
            left: 'center',
            text: '开发类别'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                type:'shadow',
            }
        },
        grid:{
            left:'3%',
            right:'3%',
            bottom:'3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['工站开发', '工站修改', '报表开发', '报表修改', '模板制作', '其他']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value:15,
                        itemStyle:{
                            color: 'rgb(255,105,70)'
                        }
                    },
                    {
                        value:46,
                        itemStyle:{
                            color: 'rgb(230,160,60)'
                        }
                    },
                    {
                        value:31,
                        itemStyle:{
                            color: 'rgb(65,160,255)'
                        }
                    },
                    {
                        value:5,
                        itemStyle:{
                            color: 'rgb(105,195,60)'
                        }
                    },
                    {
                        value:20,
                        itemStyle:{
                            color: 'rgb(55,85,115)'
                        }
                    },
                    {
                        value:8,
                        itemStyle:{
                            color: 'rgb(110,100,200)'
                        }
                    },
                ],
                type: 'bar',
                barWidth:'80%',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    option && myChart.setOption(option);
})


</script>

<template>
    <div id="echartsMain-Bar"></div>
</template>